@{
    Layout = "_Layout";
}

<style>
    #form_box {
        margin: 0px auto;
        width: 400px;
        /* 磨砂玻璃效果 */
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 10px;
    }

    #form_contain{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .banner-video {
        position: absolute;
        height: 100%;
        object-fit: cover;
        /* opacity: 0.8; */
        top: 0px;
        left: 0px;
        z-index: -1;
        width: 100%;
    }
</style>

<main style="position: relative; height: 100%; min-width: 1200px;">
    <video src="~/video/bg.mp4" class="banner-video" width="auto" autoplay="true" loop="true"></video>

    <div id="form_contain">
        <form class="box" id="form_box" method="post">
            <h4 class="title is-4"><strong>加入我们</strong></h4>
            <div style="padding-left: 20px;">
                <!-- 用户名 -->
                <div class="field">
                    <label class="label">用户名</label>
                    <p class="control has-icons-left has-icons-right">
                        <input name="UserName" class="input" type="phone" placeholder="用户名仅用于显示" required autofocus>
                        <span class="icon is-small is-left">
                            <i class="fa-solid fa-user"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </p>
                </div>

                <!-- 手机号 -->
                <div class="field">
                    <label class="label">手机号</label>
                    <p class="control has-icons-left has-icons-right">
                        <input name="PhoneNumber" class="input" type="phone" placeholder="登录将使用此项"
                               required pattern="^1[3456789]\d{9}$">
                        <span class="icon is-small is-left">
                            <i class="fa-solid fa-phone"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </p>
                </div>

                <!-- 密码 -->
                <div class="field">
                    <label class="label">密码</label>
                    <p class="control has-icons-left">
                        <input name="Password" class="input" type="password" placeholder="请输入密码" required>
                        <span class="icon is-small is-left">
                            <i class="fas fa-lock"></i>
                        </span>
                    </p>
                </div>

                <!-- 确认密码 -->
                <div class="field">
                    <label class="label">确认密码</label>
                    <p class="control has-icons-left">
                        <input class="input" type="password"
                               placeholder="请再次输入密码" required>
                        <span class="icon is-small is-left">
                            <i class="fa-solid fa-unlock"></i>
                        </span>
                    </p>
                </div>

                <!-- 验证码 -->
                <div class="field">
                    <label class="label">验证码</label>
                    <div class="container">
                        <div class="columns">
                            <div class="column is-one-half">
                                <p class="control has-icons-left">
                                    <input name="Captcha" class="input" type="text"
                                           placeholder="请输入验证码" required>
                                    <span class="icon is-small is-left">
                                        <i class="fa-solid fa-bug"></i>
                                    </span>
                                </p>
                            </div>
                            <div class="column is-one-half">
                                <img src="/UserApi/VerifyCode" alt="验证码" class="image">
                            </div>
                        </div>
                    </div>

                </div>

                <div class="field buttons is-right">
                    <button class="button is-primary is-fullwidth is-outlined">
                        注册
                    </button>
                </div>

            </div>

        </form>

    </div>
</main>
